<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>draggable</title>
</head>
<style type="text/css">
  #div1,
  #div2 {
    float: left;
    width: 100px;
    height: 350px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }
</style>

<body>


  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div draggable="true" id='3'  ondragstart="drag(event)">demo3</div>
  </div>
  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div draggable="true" id='1' ondragstart="drag(event)">demo1</div>
    <div draggable="true" id='2' ondragstart="drag(event)">demo2</div>
  
  
  </div>

</body>


<script>
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    // console.log(ev.target.parentNode.children)
    ev.dataTransfer.setData("Text", ev.target.id);
  }

  function drop(ev) {
    ev.preventDefault();
    // console.log(ev)
    var data = ev.dataTransfer.getData("Text");
    console.log(ev.target);
    ev.target.appendChild(document.getElementById(data));
  }
</script>

</html>